<template>
	<view class="content">
		<view class="classify">
			<text :class="current===0?'classify-item active':'classify-item'" @click="tuijian(0)">
				推荐
			</text>
			<text :class="current===(index+1)?'classify-item active':'classify-item'"
				v-for="(item,index) in classifyList" :key="index" @click="chooseClassify((index+1),item.id)">
				{{ item.name }}

			</text>
			<!-- <text :class="current===4?'classify-item active':'classify-item'" @click="chooseClassify(4)">
			    上新
				<img src="@/static/images/home/new.jpg">
			</text> -->
		</view>
		<Collapse @finishDropClicks="finishDropClicks" />
		<listBox :list="goodslist" />
	</view>
</template>
<script>
	import Collapse from '@/components/Collapse'
	import listBox from "@/pages/components/list-box.vue";

	export default {
		name: 'index',
		components: {
			Collapse,
			listBox
		},
		props: {
			goodslist: {
				type: Array
			},
			classifyList: {
				type: Array
			},
		},
		data() {
			return {
				// classifyList: [
				//     '原石',
				//     '石英砂成品',
				//     '设备专区',
				// ],
				current: 0,
				// total:0,
				// list:[],
				// page:1,
				// zonghe:0,
				// xiaoliang:0,
				// price:0,
				// tuijian:0,
				// new:0
			}
		},
		onShow() {

		},
		methods: {
			// getlist(){
			// 	this.$.ajax(1,"POST",'index/getgoodslist',{
			// 		page:this.page,
			// 		zonghe:this.zonghe,
			// 		new:this.new,
			// 		price:this.price,
			// 		xiaoliang:this.xiaoliang,
			// 	},(res)=>{

			// 	})
			// },
			chooseClassify(i, id) {
				this.current = i

				this.$emit('changecate', id)
			},
			tuijian(i) {
				this.current = i

				this.$emit('tuijian')
			},
			finishDropClicks(e) {

				this.$emit('changesaixuan', e)
			}

		},
		created() {

		},
		mounted() {

		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.classify {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			width: 100%;
			overflow: scroll;

			.classify-item {
				color: #A1A1A1;
				position: relative;
				padding: 20rpx;
				font-size: 28rpx;
				;

				img {
					position: absolute;
					top: 0;
					right: 0;
					width: 42rpx;
					height: 25rpx;
				}

			}

			.active {
				color: #131313;
				font-weight: 700;
				font-size: 32rpx;
			}
		}
	}
</style>